import React, { Component } from 'react';
import "./Search.scss"
import { NavBar,} from 'antd-mobile'
import { DeleteOutline } from 'antd-mobile-icons'
import { good_hotsearch } from '../utils/api'
class Search extends Component {
    constructor(props){
        super(props)
        this.state={
            val:'',
            HistoricalRecord:[],
            topSearch:[]
        }
    }
    componentDidMount(){
        this.setState({
            HistoricalRecord:JSON.parse(localStorage.getItem('HistoricalRecord'))
        })
        good_hotsearch().then((res)=>{
            // console.log(res);
            this.setState({
                topSearch:res.data.list
            })
        })
    }
    handleChange(e){
        this.setState({
            val:e.target.type == 'checkbox' || e.target.type == "arido" ? e.target.checked : e.target.value
        },()=>{
            // console.log(this.state.val);
        }
        )
    }
    // 搜索
    handleKeyDown(){
        if(window.event.keyCode === 13){
            // console.log(this.state.val);
            // 跳转路由传参
            this.props.history.push({pathname:"/index/allgood",state:{searchkey:this.state.val}})
            // 获取本地存储的历史搜索，判断，不为空进行赋值，否则赋值空数组
            let newHistoricalRecord = JSON.parse(localStorage.getItem('HistoricalRecord')) ? JSON.parse(localStorage.getItem('HistoricalRecord')) : []
            // 将输入框的东西头插到这个数组
            newHistoricalRecord.unshift(this.state.val)
            // 对数组进行去重
            newHistoricalRecord = new Set(newHistoricalRecord)
            // 然后将这个数组再存到本地存储
            localStorage.setItem('HistoricalRecord',JSON.stringify(Array.from(newHistoricalRecord)))
        }
    }
    handleClick(searchkey){
        this.props.history.push({pathname:"/index/allgood",state:{searchkey}})
    }
    back = () => {
        this.props.history.go(-1)
    }
    clear(){
        // 删除本地存储的历史记录
        localStorage.removeItem('HistoricalRecord')
        // this.componentDidMount()
        this.setState({
            HistoricalRecord:[]
        })
    }
    empty(){
        this.setState({
            val:''
        })
    }
    render() {
        return (
            <div className='search'>
                <NavBar onBack={this.back}>搜索</NavBar>
                <div className='serachBox'>
                    <div className='inputBox'>
                        <i className=' iconfont icon-fangdajing'></i>
                        {/* autoFocus="autofocus" 自动获取焦点 */}
                        <input type="text" value={this.state.val} onChange={(e)=>{this.handleChange(e)}}placeholder='搜索店铺内商品' onKeyDown={()=>{this.handleKeyDown()}} autoFocus="autofocus"/>
                    </div>
                    <div className='btn' onClick={()=>{this.empty()}}>取消</div>
                </div>
                <div className='recentlySearch'>
                    <div className='title'>
                        <h2>最近搜索</h2>
                        <DeleteOutline onClick={()=>{this.clear()}}/>
                    </div>
                    <div className='searchList'>
                        {
                            this.state.HistoricalRecord && this.state.HistoricalRecord .map((item,index)=>{
                                return (
                                    <span key={index} onClick={()=>{this.handleClick(item)}} > {item} </span>
                                )
                            })
                        }
                    </div>
                    {
                        this.state.HistoricalRecord && this.state.HistoricalRecord.length ? "" : <div>暂无搜索记录</div>
                    }
                </div>
                <div className='topSreach'>
                    <h2>热门搜索</h2>
                    {
                        this.state.topSearch.map((item,index)=>{
                            return (
                                <span key={index} onClick={()=>{this.handleClick(item)}}> {item} </span>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}
export default Search;